<template>
  <div>
    <h3>App</h3>
    <p>count: {{$store.state.count}}</p>
    <button @click="jian">-</button>
    <select name="" id="" v-model.number="num">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="jia">+</button>
    <p><button @click="jiaJiShu">和为奇数的时候+</button></p>
    <p><button @click="wait">1秒后 + </button></p>
  </div>
</template>

<script>
export default {
    name:"App",
    data(){
        return {
            num:1
        }
    },
    mounted(){
        console.log('App this: ', this)
    },
    methods:{
        jian(){
            // this.$store.dispatch('decrement', this.num)
            // 直接通过mutation修改数据【actions没有业务逻辑和异步操作时】
            this.$store.commit('DECREMENT', this.num)
        },
        jia(){
            // this.$store.dispatch('increment', this.num)
            this.$store.commit('INCREMENT', this.num)
        },
        jiaJiShu(){
            this.$store.dispatch('incrementOdd', this.num)
        },
        wait(){
            this.$store.dispatch('wait', this.num)
        }
    }
}
</script>

<style>

</style>